<template>
    <div class="right-panel" v-if="selectedBlock">
        <div class="right-panel-left">
            <component :is="RightMaterial" :block="selectedBlock" @change="(block:Block)=>useEditor.updateBlock(block)"></component>
        </div>
    </div>
</template>
<script setup lang="ts">
import {Lightning,Share} from '@icon-park/vue-next';
import { storeToRefs } from 'pinia';
import { computed } from 'vue';

import { useEditorStore } from '@/stores/editor';
import type { Block } from '@/types/Block';

import ChartSetting from './ChartSetting.vue';
import ImageSetting from './ImageSetting.vue';
import TextSetting from './TextSetting.vue';
const useEditor=useEditorStore();
const {selectedBlock}=storeToRefs(useEditor)

const RightMaterial=computed(()=>{
    if(!selectedBlock.value) return null;
    switch(selectedBlock.value.type){
        case 'text':
            return TextSetting;
        case 'chart':
            return ChartSetting;
        case 'image':
            return ImageSetting;
        default:
            return null;
    }
})
</script>
<style scoped>
.right-panel{
    display:flex;
    height: 100%;
    width: 280px;
    background-color: #f5f5f5;
    box-shadow: var(--color-gray-300) 1px 0 0;
}
.right-panel-left{
    width: 100%;
    height: 100%;
    background-color: #e8e8e8;
    padding: 0 10px;
    display: flex;
    flex-direction:column;
    align-items: center;
}

</style>
